<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>jQuery UI Tabs Beispiel</title>

	<link rel="stylesheet" 
    	  href="tabs.css" 
          type="text/css" 
          media="screen, projection"/>

	<!-- JQuery -->
	<script type="text/javascript" 
			src="js/jquery-1.3.2.min.js">
    </script>
    
    <!-- JQuery UI -->
	<script type="text/javascript" 
			src="js/jquery-ui-1.7.custom.min.js">
    </script>
    
    <!-- Initialisierung Tabs -->
	<script type="text/javascript">
		$(function() {

			var $tabs = $('#tabs').tabs();
	
			$(".ui-tabs-panel").each(function(i){
				var totalSize = $(".ui-tabs-panel").size() - 1;
			});
	
			$('.next-tab, .prev-tab').click(function() { 
		           $tabs.tabs('select', $(this).attr("rel"));
		           return false;
		    });
		});
    </script>

</head>

<body>
		
    <div id="tabs">
    
    	<!-- Navigation Tabs -->
        <ul>
            <li><a href="#fragment-1">Ort hinzufügen</a></li>
            <li><a href="#fragment-2">Kunde hinzufügen</a></li>
            <li><a href="#fragment-3">Optionen</a></li>
        </ul>
        
		<!-- Tab Content 01 -->
        <div id="fragment-1" class="ui-tabs-panel">
             Content 01
        </div>
        
        <!-- Tab Content 02 -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
             Content 02
        </div>
        
        <!-- Tab Content 02 -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
            Content 03
        </div>
    
    </div>
	
</body>

</html>
